<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas SVG</title>

<script src="../svgcanvas.js"></script>
<script>
	window.onload = function() {
		
		var ctx = new SVGCanvas( "SVG" );
		
		roundRect( ctx , 10 , 10, 100, 100, 3, true , false );
		
		function roundRect(ctx, x, y, width, height, radius, fill, stroke) {
			if (typeof stroke == "undefined" ) {
			  stroke = true;
			}
			if (typeof radius === "undefined") {
			  radius = 5;
			}
			ctx.beginPath();
				ctx.moveTo(x + radius, y);
				ctx.lineTo(x + width - radius, y);
				ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
				ctx.lineTo(x + width, y + height - radius);
				ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
				ctx.lineTo(x + radius, y + height);
				ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
				ctx.lineTo(x, y + radius);
				ctx.quadraticCurveTo(x, y, x + radius, y);
			ctx.closePath();
			if (stroke) {
			  ctx.stroke();
			}
			if (fill) {
			  ctx.fill();
			}        
		}
		
		document.getElementById('svg').innerHTML = ctx.toDataURL("image/svg+xml");
		
	};
</script>

</head>

<body>
<canvas id="SVG" width="600" height="600" style="border: solid 1px #999999;">Your browser does not support canvas.</canvas>
<div id="svg"></div>
</body>
</html>
